<template>
  <view :style="colorStyle"> </view>
</template>

<script>
import {
  topicInfo,
  likesRemove,
  likesSave,
  commentSave,
  socialCommentPage,
  topicTagList,
  updateParent,
  config,
} from "@/servers/servers.js";
import { HTTP_STATUS } from "@/servers/config.js";
import colors from "@/mixins/color";
import { getGloBalData, getToken } from "../../utils/storage";
import { back, go, loading, msg, showModal } from "../../utils/wxAPI";
import { handleLoopCallBack } from "../../utils/util";
export default {
  mixins: [colors],
  data() {
    return {
      placeholder: "输入你心声",
      focus: false,
      show: false,
      labelList: [],
      menuInfo: {},
      navTitleModuleStyle: "",
      options: {},
      info: {
        goodsList: [],
      },
      content: "",
      list: [],
      total: 0,
      current: 1,
      targetId: "",
      tagList: [],
      configInfo: {},
    };
  },
  async onLoad(options) {
    this.options = options;
    // #ifdef MP-WEIXIN
    this.menuInfo = getApp().globalData.menuInfo;
    this.navTitleModuleStyle = `height:${
      this.menuInfo.height + this.menuInfo.top + 10
    }px`;
    // #endif
    this.handleConfig();
    if (getToken()) {
      this.socialCommentPage();
    }
  },
  async onShow() {
    if (getToken()) {
      await this.topicTagList();
      this.topicInfo();
      this.socialCommentPage();
      if (this.options.uid) {
        updateParent({
          id: this.options.uid,
        });
      }
    } else {
      handleLoopCallBack(async () => {
        await this.topicTagList();
        this.topicInfo();
        this.socialCommentPage();
        if (this.options.uid) {
          updateParent({
            id: this.options.uid,
          });
        }
      });

      // #ifdef H5
      if (getEnv() == "H5") {
        uni.reLaunch({
          url: "/pages/login/login",
        });
      }
      // #endif
    }
  },
  methods: {
    async handleConfig() {
      let { data } = await config({
        key: "social",
      });
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        // console.log(data.data);
        let info = JSON.parse(data.data);
        console.log(info);
        this.configInfo = info;
      }
    },
    videoChange(e) {
      let current = e.detail.current;
      uni.createVideoContext(`videos`, this).pause();
      if (current !== 0 && this.info.video) {
        let videoContext = uni.createVideoContext(`videos`, this);
        videoContext.pause();
      }
    },
    async topicTagList() {
      let { data } = await topicTagList({
        status: 1,
      });
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        let obj = {};
        for (let key of data.data) {
          obj[key.id] = key.name;
        }
        this.tagList = obj;
      }
    },
    async socialCommentPage() {
      loading();
      let { data } = await socialCommentPage({
        current: this.current,
        size: 10,
        targetId: this.options.id,
      });
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        let list = data.data.records;
        this.total = data.data.total;
        list.map((item) => {
          item.open = false;
        });
        if (this.current == 1) {
          this.list = list;
        } else {
          this.list.push(...list);
        }
        setTimeout(() => {
          this.loadingPage = true;
        }, 500);
      }
      uni.stopPullDownRefresh();
      uni.hideLoading();
    },
    async favoriteSave() {
      loading();
      if (this.info.likeId > 0) {
        let { data } = await likesRemove({
          id: this.info.likeId,
        });
        if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
          this.topicInfo();
        }
      } else {
        let { data } = await likesSave({
          targetId: this.options.id,
          targetType: 1,
        });
        if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
          this.topicInfo();
        }
      }
      uni.hideLoading();
    },
    async topicInfo() {
      loading();
      let { data } = await topicInfo({
        id: this.options.id,
      });
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        console.log(data);
        let info = data.data;
        info.img = info.img.split(",");
        info.tag = info.tag.split(",");
        this.info = info;
      }
      uni.hideLoading();
    },
    gourl(url) {
      go(url);
    },
    back() {
      back();
    },

    async commentSave() {
      if (!this.content) {
        return msg("请输入评价内容");
      }
      loading();
      console.log(this.targetId);
      let { data } = await commentSave({
        content: this.content,
        extend: "{}",
        targetId: this.targetId ? this.targetId : this.options.id,
        targetType: this.targetId ? 2 : 1,
      });
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        this.targetId = "";
        this.content = "";
        if (this.configInfo.isTopicCommentAudit) {
          showModal({
            t2: "提交成功，请等待审核",
            btn1show: false,
          });
        } else {
          msg(data.msg);
        }
      }
      uni.hideLoading();
    },
    replyChange(item) {
      console.log(item);
      this.focus = true;
      this.placeholder = `回复：${item.fromUserName}`;
      this.targetId = item.id;
    },
    inputBlur() {
      this.focus = false;
      this.placeholder = `输入你心声`;
      // this.targetId = '';
    },
    onTap() {},
    seeAll(index, indexs) {
      this.list[index].open = !this.list[index].open;
    },

    previewImage(index) {
      uni.previewImage({
        current: index,
        urls: this.info.img,
      });
    },
  },
  onReachBottom() {
    if (this.list.length == this.total) return;
    this.current += 1;
    this.socialCommentPage();
  },
  onPullDownRefresh() {
    this.current = 1;
    this.socialCommentPage();
    this.topicInfo();
  },
};
</script>
<style>
/* #ifdef MP-WEIXIN */
page {
  background: #fff;
}

/* #endif */
</style>
<style lang="scss" scoped>
page {
  background: #fff;
}

.infobox1 {
  background: #fff;
  top: 0;
  width: 100%;
  padding: 0 0 10rpx 0;
  position: fixed;
  z-index: 999;
  /* #ifdef H5 */
  height: 90rpx;

  /* #endif */
  .block1 {
    position: absolute;
    bottom: 20rpx;
  }

  .back {
    width: 48rpx;
    height: 48rpx;
    margin-left: 30rpx;
  }

  .headimg {
    margin: 0 16rpx 0 24rpx;
    width: 48rpx;
    height: 48rpx;
    border-radius: 48rpx;
  }

  .name {
  }
}

.infobox2 {
  swiper {
    height: 1000rpx;
  }

  video {
    width: 100%;
    height: 1000rpx;
    object-fit: cover;
  }

  image {
    width: 100%;
    height: 1000rpx;
  }
}

.infobox3 {
  margin: 32rpx 30rpx 0;

  .block1 {
  }

  .block2 {
    margin: 32rpx 0 0;
  }

  .block3 {
    margin: 32rpx 0 0;

    .info1 {
      margin: 0 24rpx 0 0;
    }
  }

  .block4 {
    margin: 32rpx 0 0;
    border-radius: 20rpx;
    border: 2rpx solid #f5f5f5;
    padding: 16rpx;

    .left {
      image {
        width: 68rpx;
        height: 68rpx;
        border-radius: 16rpx;
        margin: 0 8rpx 0 0;
      }
    }

    .right {
      image {
        width: 32rpx;
        height: 32rpx;
        margin-left: 8rpx;
      }
    }
  }

  .block5 {
    padding: 32rpx 0;
    border-bottom: 1px solid #ccc;
  }
}

.infobox4 {
  margin: 32rpx 30rpx 0;

  .block2 {
    margin: 32rpx 0 0;

    .list {
      margin: 0 0 24rpx 0;
      border-bottom: 1px solid #f5f5f5;

      image {
        width: 56rpx;
        height: 56rpx;
        border-radius: 56rpx;
      }

      .info1 {
        margin-left: 16rpx;
        width: calc(100% - 16rpx - 56rpx);

        .tipbox1 {
        }

        .tipbox2 {
          margin: 8rpx 0;
        }

        .tipbox3 {
          .tip1 {
          }

          .tip2 {
            margin-left: 25rpx;
          }
        }

        .tipbox4 {
          padding: 0 0 30rpx 0;
          margin: 24rpx 0 0;

          .lists {
            margin: 0 0 24rpx 0;

            image {
              width: 40rpx;
              height: 40rpx;
              border-radius: 40rpx;
            }

            .info1s {
              margin-left: 16rpx;
              width: calc(100% - 16rpx - 40rpx);
            }
          }
        }
      }
    }
  }
}

.infobox6 {
  position: fixed;
  bottom: 0;
  width: calc(100% - 60rpx);
  background: #fff;
  border-top: 1px solid #f5f5f5;
  padding: 10rpx 30rpx 50rpx;
  z-index: 999;

  .block1 {
    border-radius: 55rpx;
    background: #ef8200;
    width: 100%;
    padding: 18rpx 0;

    image {
      width: 44rpx;
      height: 44rpx;
    }
  }

  .block2 {
    border-radius: 55rpx;
    background: #f65b49;
    width: 100%;
    padding: 18rpx 0;

    image {
      width: 44rpx;
      height: 44rpx;
    }
  }
}

.infobox5 {
  position: fixed;
  bottom: 0;
  width: calc(100% - 60rpx);
  background: #fff;
  border-top: 1px solid #f5f5f5;
  padding: 10rpx 30rpx 50rpx;
  z-index: 999;

  .left {
    border-radius: 8rpx;
    background: #f5f5f5;
    height: 80rpx;
    overflow: hidden;
    width: 584rpx;
    position: relative;

    image {
      width: 48rpx;
      height: 48rpx;
      margin-left: 30rpx;
    }

    input {
      width: calc(100% - 48rpx - 30 - 100rpx - 30rpx);
      margin-left: 30rpx;
    }

    .btn {
      background: var(--view-theme);
      padding: 20rpx 52rpx;
      border-radius: 8rpx;
      position: absolute;
      right: 0;
    }
  }

  .right {
    text-align: center;
  }
}

.popbox1 {
  background: #fff;
  border-radius: 30rpx 30rpx 0 0;
  position: relative;

  .close {
    width: 44rpx;
    height: 44rpx;
    position: absolute;
    right: 30rpx;
    top: 40rpx;
  }

  .block1 {
    padding: 36rpx 0;
    text-align: center;
  }

  .block2 {
    background: #f5f5f5;
    padding: 30rpx 30rpx 0;
    height: 55vh;
    overflow-y: scroll;
    // margin: 30rpx 0rpx 0 30rpx;

    .goodslist {
      margin: 0 0 24rpx 0;
      background: #fff;
      border-radius: 24rpx;
      padding: 16rpx;

      image {
        width: 230rpx;
        height: 230rpx;
        border-radius: 24rpx;
      }

      .goodsinfo {
        margin-left: 16rpx;
        width: calc(100% - 16rpx - 230rpx);
        height: 230rpx;

        .info2 {
          .tip1 {
            position: relative;
            top: 2rpx;
          }
        }
      }
    }
  }
}
</style>
